  <template>
  <div style="margin-top: -50px;">


  <!-- <el-dialog :visible.sync="dialogTableVisibleloading" :show-close="showClo" :close-on-click-modal="clo">
<div class="dia"  />
</el-dialog> -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">

          <el-form-item style="width: 300px" label="ip地址">
            <el-input v-model="sizeForm.ipadress"></el-input>
          </el-form-item>



             <el-button
            @click="online()"
            type="info"
            size="mini"
            style="float: right; margin-right: 200px; margin-top: -50px"
            round
            >在线调试</el-button>


          <el-form-item style="width: 200px" label="端口号">
            <el-input v-model="sizeForm.port"></el-input>
          </el-form-item>

          <el-form-item
            label="自学习状态控制"
            style="float: right; margin-right: 800px"
          >
            <el-select v-model="sizeForm.status" placeholder="请选择模式">
              <el-option label="开机" value="1"></el-option>
              <el-option label="关机" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="width: 200px" label="地址码">
            <el-input v-model="sizeForm.adresscode"></el-input>
          </el-form-item>

          <el-form-item
            style="width: 300px; margin-top: -10px"
            label="指令名称"
          >
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in instructions" :key="item.id"
                  :label="item.name"
                  :value="item.controllerid">
                </el-option>
              </el-select>
          </el-form-item>

          <el-button
            @click="setstatus()"
            type="info"
            size="mini"
            style="float: right; margin-right: 800px; margin-top: -50px"
            round
            >{{ this.sizeForm.status == 1 ? "开机" : "关机" }}</el-button
          >

          <el-button
            @click="send()"
            type="success"
            size="mini"
            style="float: right; margin-right: 600px; margin-top: -50px"
            round
            >发送指令</el-button
          >
        </el-form>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;overflow:auto"
        max-height="342px"
        @selection-change="handleSelectionChange"
        v-loading="loading"
    element-loading-text="接受红外码中，请耐心等待"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="指令名称" width="120">
          <template slot-scope="scope">{{ scope.row.instructionname }}</template>
        </el-table-column>
        <el-table-column prop="instructionid" label="指令序号" width="120">
        </el-table-column>
        <el-table-column
          prop="infraredcode"
          label="学习的红外码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="warning"
          @click="handlecheck(scope.row.instructionid,sizeForm.adresscode)">验证发送</el-button>
          <el-button style="float:right"
          size="mini"
          type="danger"
          @click="del(scope.row.instructionid)">删除</el-button>
      </template>
    </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
         <el-button type="success" style="float:right" @click="bagdown()">打包下载</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
import studyapi from '@/api/study'
export default {
  name:'studyserver',
  data() {
    return {
      tableData:[],
      multipleSelection: [],
      sizeForm: {
        ipadress: "",
        port: "",
        status: "",
        adresscode: "",
        instructionname: "",
        controllerid:''
      },
      instructions:[],
        value:'',
        //  dialogTableVisibleloading:false,
       showClo:false,
       loading:false,
       clo:false
    };
  },

created(){
this.search();


this.searchinstructions();
},

  methods: {

del(id){
console.log(id)
studyapi.del(id).then(response=>{

if(response.data.code==20000){

this
                .$message({
                type: 'success'
                ,
                message:'删除成功'
                })
                this.search();
                return;

}else{
  this
                .$message({
                type: 'error'
                ,
                message:'删除失败'
                })
                return;
}



})

}
,

searchinstructions(){
  studyapi.searchinstructions().then(reponse=>{


console.log(reponse.data.data.data)

this.instructions=reponse.data.data.data




  })
},



online(){
 this.$router.push({ path:'/online'})
},

bagdown(){

if(this.multipleSelection.length==0){
   this
                .$message({
                type: 'warning'
                ,
                message:'请先选择指令'
                })
                return;
}

console.log(this.sizeForm.ip)

studyapi.bagdown(this.multipleSelection,this.sizeForm.adresscode,this.sizeForm.ipadress,this.sizeForm.port).then(reponse=>{

if(reponse.data.data.data==true){

this
                .$message({
                type: 'success'
                ,
                message:'发送成功'
                })

}



})


},


    handlecheck(id,adresscode){

console.log(adresscode)

studyapi.sendcheck(id,adresscode,this.sizeForm.ipadress,this.sizeForm.port).then(reponse=>{
console.log(reponse.data.data.data)
if(reponse.data.data.data==true){
this.$message({
                type: 'success'
                ,
                message:'验证成功'
                })
}
})
},

      search(){
studyapi.search().then(reponse=>{
this.tableData=reponse.data.data.items
// console.log(reponse.data.items)
console.log(reponse.data.data.items)
})
      },


toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    send() {

if(this.sizeForm.status==0){
   this
                .$message({
                type: 'warning'
                ,
                message:'请先开机'
                })
                return;
}

//this.dialogTableVisibleloading=true;
this.loading=true
this.sizeForm.controllerid=this.value

console.log(this.sizeForm)

      studyapi.send(this.sizeForm).then((reponse) => {
        console.log(reponse)
    //    this.dialogTableVisibleloading=false;
    this.loading=false
    this.$message({
                  type: 'success',
                message: '红外码获取成功'
                })
         this.search();
      }).catch((response) => { // 失败
    //   this.dialogTableVisibleloading=false;
    this.loading=false
                this.$message({
                  type: 'error',
                message: '红外码获取异常'
                })
                })
    },


    setstatus() {
      studyapi
        .setstatus(this.sizeForm)
        .then((response) => {
          console.log(response.data.data.data);
          this
                .$message({
                type: 'success'
                ,
                message: (this.sizeForm.status==1 ?'开机':'关机')+'指令已下发'
                })
        })
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

  .dia{
    width: 100%;
    height: 300px;
}

.box-card {
  width: 100%;
  height: 100%;
}
</style>
